<template>
  <div class="contant">
    <div class="select">
      <p class="title">
        审判法官人数：
        <span class="num">{{ count }}</span>
        人
      </p>
      <p class="tabs">
        <span
          class="tab-item"
          :class="currentIndex == 0 ? 'active' : ''"
          @click="changeTabs(0)"
        >
          审判法官
        </span>
        <span
          class="tab-item"
          :class="currentIndex == 1 ? 'active' : ''"
          @click="changeTabs(1)"
        >
          法官助理
        </span>
      </p>
    </div>
    <div class="table">
      <div class="table-header">
        <span class="label w-80">序号</span>
        <span class="label f-1">员额法官</span>
        <span class="label f-1">
          收案量
          <i class="small">（互联网/非互联网）</i>
        </span>
        <span class="label f-1">
          结案量
          <i class="small">（互联网/非互联网）</i>
        </span>
        <span class="label f-1">
          未结案量
          <i class="small">（互联网/非互联网）</i>
        </span>
      </div>
      <div class="table-body">
        <div class="table-row" v-for="(item, index) in tableData" :key="index">
          <span class="value w-80">{{ index + 1 }}</span>
          <span class="value f-1">{{ item.cbrxm }}</span>
          <span class="value f-1 c-sky">
            {{ item.las_hlw }} / {{ item.las_fhlw }}
          </span>
          <span class="value f-1 c-sky">
            {{ item.jas_hlw }} / {{ item.jas_fhlw }}
          </span>
          <span class="value f-1 c-sky">
            {{ item.wjs_hlw }} / {{ item.wjs_fhlw }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from "vue";
import {getDepartRybaqh} from '@/api/bmfx'
import { getDate } from '@/utils/index.js'
const { getYearStartDate, getYearEndDate } = getDate()
const props = defineProps({
  selectId: {
    type: Number,
    default: 1,
  },
});

const count = computed(() => {
  return tableData.value.length;
});
const ryfl = computed(() => {
  return ["审判法官", "法官助理"][currentIndex.value];
});
const ajlx = computed(() => {
  return ["民初", "诉前调"][props.selectId - 1];
});
onMounted(() => {
  queryDepartRybaqh()
});

const currentIndex = ref(0);
const tableData = ref([]);
const changeTabs = (index) => {
  currentIndex.value = index;
  tableData.value = getTableData(ryfl.value, ajlx.value);
};

// 获取人员办案情况
const tableList=ref([])
const queryDepartRybaqh = () => {
  const params = {
    starttime: getYearStartDate(),
    endtime: getYearEndDate(),
  }
  getDepartRybaqh(params).then((res) => {
    tableList.value = res.data.data
    tableData.value = getTableData(ryfl.value, ajlx.value);
});
}
const  getTableData=(ryfl, ajlx)=> {
return tableList.value.filter(item => {
  return item.ryfl === ryfl && item.ajlx === ajlx
});
}
watch(
  () => props.selectId,
  () => {
    tableData.value = getTableData(ryfl.value, ajlx.value);
    console.log(`tableData.value->`,tableData.value)
  }
);
</script>

<style lang="scss" scoped>
.contant {
  color: #fff;
  padding: 0 0 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .num {
    font-family: PangMenZhengDao;
    font-size: 28px;
    color: #00b7fe;
    line-height: 32px;
    padding: 0 5px;
  }
  .select {
    display: flex;
    align-items: center;
    padding: 20px 0 10px;
    .title {
      font-size: 14px;
      margin-left: 20px;
    }
    .tabs {
      margin-left: 30px;
      display: flex;
      background: rgba(4, 127, 234, 0.2);
      font-size: 14px;
      border-radius: 5px;
      .tab-item {
        padding: 6px 10px;
        cursor: pointer;
        color: #6c8097;
        border: 1px solid transparent;
        &.active {
          border-radius: 5px;
          color: #fff;
          border: 1px solid #00c1e0;
          background: radial-gradient(
            rgba(4, 127, 234, 0.2) 50%,
            rgba(0, 193, 224, 0.4)
          );
        }
      }
    }
  }
  .table {
    color: rgba(208, 222, 238, 1);
    height: calc(100% - 84px);
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      font-size: 14px;
      padding: 10px;
      padding-right: 18px;
      .label {
        text-align: center;
        font-size: 15px;
        .small {
          font-size: 13px;
          font-style: normal;
        }
      }
      .w-80 {
        width: 80px;
      }
    }
    .table-body {
      height: calc(100% - 40px);
      overflow-y: auto;
      padding: 0 10px;
      &::-webkit-scrollbar {
        width: 8px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: rgba(6, 104, 171, 1);
        border-radius: 4px;
      }
      &::-webkit-scrollbar-track {
        background-color: rgba(6, 104, 171, 0.1);
      }
      .table-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        .value {
          text-align: center;
          font-size: 14px;
        }
        .w-80 {
          width: 80px;
        }
        &:nth-child(2n-1) {
          border-radius: 5px;
          background: url("../images/table-item-bg.png") no-repeat;
          background-size: cover;
        }
      }
    }
  }
}
.f-1 {
  flex: 1;
}
.c-sky {
  color: #30f1ff;
}
</style>
